<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ContentAB - AI驱动的A/B测试优化</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入 Google Fonts - Outfit 字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
    <!-- 引入 Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入 Chart.js 用于绘制图表 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <!-- 现代化导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="#" class="logo">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M3 3h18v18H3V3zm16 16V5H5v14h14zM7 7h10v2H7V7zm0 4h10v2H7v-2zm0 4h7v2H7v-2z"/>
                </svg>
                ContentAB
            </a>
            <div class="nav-links">
                <a href="#features">功能特点</a>
                <a href="#how-to-use">为谁设计</a>
                <a href="#pricing">预测结果</a>
            </div>
            <div class="auth-buttons">
                <button class="btn btn-outline">登录</button>
                <button class="btn btn-primary">注册</button>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="hero">
        <div class="hero-container">
            <h1>用AI驱动的A/B测试优化您的内容</h1>
            <p class="hero-text">通过大型语言模型分析，获取社交媒体帖子效果的统计学分析，做出数据驱动的决策。</p>
            <div class="hero-buttons">
                <button class="btn btn-primary btn-lg">开始测试</button>
                <button class="btn btn-outline btn-lg">了解更多</button>
            </div>
            <div class="social-logos">
                <i class="fab fa-tiktok"></i>
                <i class="fab fa-weixin"></i>
                <i class="fab fa-zhihu"></i>
                <i class="fab fa-youtube"></i>
                <i class="fab fa-weibo"></i>
                <i class="fab fa-bilibili"></i>
            </div>
        </div>
    </section>

    <!-- 功能特点 -->
    <section id="features" class="section">
        <div class="container">
            <h2 class="section-title">帖子效果比较</h2>
            <p class="section-description">我们的AI分析引擎能够准确预测不同版本内容在社交媒体上的表现</p>
            
            <div class="features-grid">
                <div class="feature-card">
                    <i class="fas fa-chart-line"></i>
                    <h3>实时分析</h3>
                    <p>即时获取两个版本内容的互动数据对比</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-percentage"></i>
                    <h3>统计置信度</h3>
                    <p>基于大量模拟数据的高置信度结果</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 目标用户 -->
    <section id="how-to-use" class="section bg-gray-50">
        <div class="container">
            <h2 class="section-title">专为谁设计</h2>
            
            <div class="about-container">
                <div class="card">
                    <div class="about-image">
                        <img src="https://heyboss.heeyo.ai/1745526173-490411a7-www.hubspot.com-hubfs-content-20creation.png" alt="内容创作者" class="user-image">
                    </div>
                    <div class="about-content">
                        <h3>内容创作者</h3>
                        <p>提升您的社交媒体帖子效果，通过A/B测试找到最能吸引粉丝的内容</p>
                    </div>
                </div>
                <div class="card">
                    <div class="about-image">
                        <img src="https://images.unsplash.com/photo-1552664730-d307ca884978" alt="社交媒体经理" class="user-image">
                    </div>
                    <div class="about-content">
                        <h3>媒体运营</h3>
                        <p>使用科学方法优化您的社交媒体运营策略，基于数据做出更明智的内容决策</p>
                    </div>
                </div>
                <div class="card">
                    <div class="about-image">
                        <img src="https://heyboss.heeyo.ai/1745526173-ea35cc60-www.theforage.com-blog-wp-content-uploads-2023-02-data-analyst.jpg" alt="媒体经理" class="user-image">
                    </div>
                    <div class="about-content">
                        <h3>数据分析师</h3>
                        <p>获取详细的统计置信度数据，为内容策略提供深入分析和可靠建议。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 测试区域 -->
    <section id="test-section" class="section">
        <div class="container">
            <h2 class="section-title">创建A/B测试</h2>
            <p class="section-description">输入两个不同版本的帖子内容，我们将使用AI分析哪一个更有可能获得更高的互动率</p>
            
            <div class="input-section">
                <div class="column">
                    <h3>版本 A</h3>
                    <div class="input-group">
                        <textarea id="version_a" placeholder="在此输入您的第一个帖子版本..." data-count="count_a"></textarea>
                        <div class="char-count"><span id="count_a">0</span> 字符</div>
                    </div>
                    <div class="platform-selector">
                        <label for="platform">平台:</label>
                        <div class="custom-select">
                            <div class="select-selected">
                                <i class="fab fa-tiktok"></i>抖音
                            </div>
                            <div class="select-items">
                                <div class="select-option" data-value="抖音"><i class="fab fa-tiktok"></i>抖音</div>
                                <div class="select-option" data-value="小红书"><i class="fab fa-reddit-alien"></i>小红书</div>
                                <div class="select-option" data-value="知乎"><i class="fab fa-zhihu"></i>知乎</div>
                                <div class="select-option" data-value="快手"><i class="fas fa-play-circle"></i>快手</div>
                                <div class="select-option" data-value="视频号"><i class="fas fa-video"></i>视频号</div>
                                <div class="select-option" data-value="微博"><i class="fab fa-weibo"></i>微博</div>
                                <div class="select-option" data-value="B站"><i class="fab fa-bilibili"></i>B站</div>
                            </div>
                            <input type="hidden" id="platform" name="platform" value="抖音">
                        </div>
                    </div>
                </div>
                <div class="column">
                    <h3>版本 B</h3>
                    <textarea id="version_b" placeholder="在此输入您的第二个帖子版本..."></textarea>
                    <div class="char-count"><span id="count_b">0</span> 字符</div>
                    <div class="reader-input">
                        <label for="max_reader">读者数:</label>
                        <input type="number" id="max_reader" value="7" min="1" max="50" step="1">
                    </div>
                </div>
            </div>

            <div class="action-buttons">
                <button class="btn btn-secondary" id="clear-btn">清除</button>
                <button class="btn btn-secondary" id="save-btn">保存草稿</button>
                <button class="btn btn-secondary" id="upload-btn">上传媒体</button>
                <button id="predict_button" class="btn btn-primary btn-lg">
                    <span class="btn-text">比较</span>
                    <span class="btn-spinner" style="display:none;">
                        <i class="fas fa-spinner fa-spin"></i>
                    </span>
                </button>
            </div>
            
            <div id="loading_indicator" style="display: none;">
                <i class="fas fa-spinner fa-spin"></i> 正在预测中，请稍候... (当前读者: <span id="current_reader">0</span>)
            </div>
            
            <!-- 弹幕容器 -->
            <div id="danmaku_container"></div>
            
            <!-- 预测状态图标 -->
            <div id="prediction_status" class="status-container">
                <div id="predicting_icon" class="status-icon">
                    <i class="fas fa-spinner fa-spin"></i>
                    <span>预测中...</span>
                </div>
                <div id="completed_icon" class="status-icon" style="display:none;">
                    <i class="fas fa-check-circle"></i>
                    <span>预测完成</span>
                </div>
            </div>
        </div>
    </section>

    <!-- 测试结果区域 -->
    <section id="pricing" class="section bg-gray-50">
        <div class="container">
            <h2 class="section-title">测试结果</h2>
            <p class="section-description">基于AI分析和统计置信度的详细分析，帮助您选择最佳的社交媒体内容</p>
            
            <div class="result-header">
                <h3>总体推荐</h3>
                <div class="result-summary">
                    <div class="recommendation-card">
                        <div class="winner-badge">版本 B 效果更好</div>
                        <p>版本 B 在所有关键指标上表现更好，统计置信度为 85%。我们建议使用此版本来获得最佳社交媒体互动效果。</p>
                    </div>
                </div>
                <p>基于多项指标分析和统计置信度</p>
                <div class="result-actions">
                    <button class="btn btn-outline">导出结果</button>
                    <button class="btn btn-outline">分享结果</button>
                </div>
            </div>

            <div class="chart-section">
                <h4>曝光量与累计互动数关系</h4>
                <div class="chart-container">
                    <canvas id="engagement_chart"></canvas>
                </div>
            </div>

            <div class="detailed-results">
                <h4>详细指标对比</h4>
                <div class="stats-container">
                    <div class="stat-card">
                        <h5>点赞</h5>
                        <div class="confidence-badge">置信度: 80%</div>
                        <div class="winner">优胜者: 版本 A</div>
                        <div class="values">
                            <span class="version-a">120</span>
                            <span class="version-b">150</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <h5>评论</h5>
                        <div class="confidence-badge">置信度: 75%</div>
                        <div class="winner">优胜者: 版本 A</div>
                        <div class="values">
                            <span class="version-a">30</span>
                            <span class="version-b">45</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <h5>转发</h5>
                        <div class="confidence-badge">置信度: 82%</div>
                        <div class="winner">优胜者: 版本 B</div>
                        <div class="values">
                            <span class="version-a">15</span>
                            <span class="version-b">28</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <h5>收藏</h5>
                        <div class="confidence-badge">置信度: 78%</div>
                        <div class="winner">优胜者: 版本 B</div>
                        <div class="values">
                            <span class="version-a">45</span>
                            <span class="version-b">68</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-container">
            <div class="footer-brand">
                <div class="logo">ContentAB</div>
                <p>使用AI驱动的A/B测试优化您的社交媒体内容效果，获取数据驱动的决策支持</p>
            </div>
            
            <div class="footer-links">
                <div class="link-group">
                    <a href="#features">功能特点</a>
                    <a href="#how-to-use">使用方法</a>
                    <a href="#pricing">价格</a>
                    <a href="#">博客</a>
                </div>
                <div class="link-group">
                    <a href="mailto:contact@contentab.com">contact@contentab.com</a>
                    <a href="tel:+10000000000">+1 (000) 000-0000</a>
                    <a href="#">联系我们</a>
                </div>
            </div>
        </div>
        
        <div class="footer-bottom">
            <p>© 2025 ContentAB. 保留所有权利</p>
            <div class="legal-links">
                <a href="#">隐私政策</a>
                <a href="#">服务条款</a>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>